<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <title>Maps Direction</title>
    <link rel="stylesheet" type="text/css" href="../css/UI.css" />
    <link rel="stylesheet" type="text/css" href="../css/dialog.css" />
    <link href="../plugins/minimal/blue.css" rel="stylesheet">
    <link rel="stylesheet" href="../plugins/bootflat/css/site.min.css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
    <link href="../plugins/bootstrap_editable/css/bootstrap-editable.css" rel="stylesheet">
    <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="../plugins/jquery-1.11.0.min.js"></script>
    <script src="../javascript/GoogleMapsProcess.js"></script>
    <script src="../javascript/DialogProcess.js"></script>
    <script src="../plugins/bootflat/js/site.min.js"></script>
    <script src="../plugins/icheck.js"></script>
    <script src="../plugins/jquery.bootpag.min.js"></script>
    <script src="../plugins/bootstrap_editable/js/bootstrap-editable.js"></script>
</head>

<body style="background-color: #E6E9ED;">
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <ul id="myTab1" class="nav nav-tabs nav-justified">
                    <li class="active"><a href="#tab-maps" data-toggle="tab">Maps</a>
                    </li>
                    <li><a href="#tab-database" data-toggle="tab">Database</a>
                    </li>
                    <li><a href="#tab-multiple-map" data-toggle="tab">Multiple Routes</a>
                    </li>
                </ul>
            </div>
            <div id="myTabContent" class="tab-content" style="background-color: #E6E9ED;">
                <div class="tab-pane fade active in" id="tab-maps">
                    <div class="example">
                        <div class="row">
                            <div class="col-md-3" style="margin : 6px 0 0 15px;">
                                <a href="#" id="filename" data-type="text" data-url="/post" data-title="Enter map's name"></a>
                            </div>
                            <div class="col-md-8" style="width:1000px;">
                                <input id="address" class="Text" type="text" placeholder="Search Location">
                            </div>
                        </div>
                    </div>

                    <div class="example">
                        <div class="row">
                            <div class="col-md-8" id="map-container">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Google Maps Panel</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="map-canvas" style="border: 5px solid #5D9CEC;"></div>
                                    </div>
                                    <div class="panel-footer">
                                        <div class="row tooltip-demo">
                                            <div class="col-md-2">
                                                <div class="btn-group">
                                                    <button type="button" id="calcroute" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">CALC ROUTE<span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#" onclick="shRoute()" id="shRoute" data-toggle="tooltip" data-placement="right" title="Find a shortest route without waypoints order consideration.">SHORT ROUTE</a>
                                                        </li>
                                                        <li><a href="#" onclick="azRoute()" id="azRoute" data-toggle="tooltip" data-placement="right" title="Find a route with waypoints order consideration.">A-Z ROUTE</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">SAVE/LOAD<span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#" onclick="pushPath()" id="save" data-toggle="tooltip" data-placement="right" title="Save filename, waypoint, start-end position, alternative route, and modified date into database.">SAVE</a>
                                                        </li>
                                                        <li><a href="#" id="opener" onclick="initLoad()" data-toggle="tooltip" data-placement="right" title="Load filename, waypoint, start-end position, alternative route, and last modified date.">LOAD</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-md-2" style="margin-left: -20px;margin-right: 20px;">
                                                <div class="btn-group">
                                                    <button type="button" id="suggest" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">SUGGEST ROUTE<span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu" id="suggestRoute" role="menu">
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="bottom" title="Show direction informations." id="guide">GUIDE</button>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="bottom" title="Reset to initial state." id="reset" onclick="clearMap()">RESET</button>
                                            </div>
                                            <div class="col-md-2" style="margin: 5px 0 0 0px;font-size: 15px;">
                                                <label id="hide_marker">
                                                    <input id="chk" type="checkbox">Hide Marker</label>
                                            </div>
                                        </div>
                                        <div class="row tooltip-demo">
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="bottom" title="View tutorial" id="tutorial">TUTORIAL</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="list-group" id="list">
                                    <a href="#" class="list-group-item active" style="background-color: #3bafda">Position (Latitude, Longitude)</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-database">
                    <div class="example">
                        <div class="row">
                            <div class="col-md-12">
                                <input class="Text3" id="searchdb" type="text" placeholder="Search Map">
                            </div>
                        </div>
                    </div>
                    <div class="example">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Google Maps Database</h3>
                                    </div>
                                    <div class="panel-body">
                                        <table class="table">
                                            <tr>
                                                <th class="col-md-1">View</th>
                                                <th class="col-md-1">X</th>
                                                <th class="col-md-2">
                                                    Name
                                                </th>
                                                <th class="col-md-1">
                                                    Route Type
                                                </th>
                                                <th class="col-md-1">
                                                    Date
                                                </th>
                                                <th class="col-md-3">
                                                    Start
                                                </th>
                                                <th class="col-md-3">
                                                    End
                                                </th>
                                            </tr>
                                        </table>
                                        <div class="containbody" style="height: 350px;">
                                            <table id="tablebody" class="table">

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-multiple-map">
                    <div class="example">
                        <div class="row">
                            <div class="col-md-9" id="multiple-map-container">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Multiple Routes</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="map-canvas-2" style="border: 5px solid #5D9CEC;"></div>
                                    </div>
                                    <div class="panel-footer">
                                        <div class="row tooltip-demo">
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-primary" id="btn-modal-maps" data-toggle="tooltip" data-placement="bottom" title="Select many maps as you want.">Load Multiple Routes</button>
                                            </div>
                                            <div class="col-md-1" style="margin-left: 20px;">
                                                <button type="button" class="btn btn-primary" id="btn-guide-map2" data-toggle="tooltip" data-placement="bottom" title="Look direction guide of selected map.">Guide</button>
                                            </div>
                                            <div class="col-md-3" style="margin-left: 10px;">
                                                <button type="button" class="btn btn-primary" id="btn-delete-map2" data-toggle="tooltip" data-placement="bottom" title="Remove Routes in map list that you want.">Remove Some Routes From Map List</button>
                                            </div>
                                            <div class="col-md-1" style="margin-left: 40px;">
                                                <button type="button" class="btn btn-primary" id="btn-reset-map2" data-toggle="tooltip" data-placement="bottom" title="Remove all maps">Reset</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="list-group containbody" id="maps_list" style="max-height: 600px !important;">
                                    <a href="#" id="a-maps" class="list-group-item active" style="background-color: #3bafda;">Maps</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--All Modals is following here-->

    <div class="modal fade" id="load">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Load map from database</h4>
                </div>
                <div class="modal-body">
                    <div class="example">
                        <div class="row">
                            <div class="col-xs-4">
                                <h5 class="modal-title">Date sort by : </h5>
                            </div>
                            <div class="col-xs-2" style="margin-left : -65px;margin-top: -5px;">
                                <div class="blank"></div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="order">Ascending<span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#" id="Asc">Ascending</a>
                                        </li>
                                        <li><a href="#" id="Dsc">Descending</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="example">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="containbody">
                                    <div class="list-group" id="selectable"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="example">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="search">
                                    <input id="t" type="text" placeholder="Search File" autofocus>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="doLoad">Load</button>
                    <button type="button" class="btn btn-primary" id="doClose" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="direction">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" style="text-align: center;">Direction Information</h3>
                </div>
                <div class="modal-body">
                    <div class="example">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="containbody" id="directions-panel"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="direction2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" style="text-align: center;">Direction Information</h3>
                </div>
                <div class="modal-body">
                    <div class="example">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="containbody" id="directions-panel2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="md-select-route">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" style="text-align: center;">Select map to display</h3>
                </div>
                <div class="modal-body">
                    <div class="example">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="containbody">
                                    <div class="list-group" id="md-list-maps"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="md-btn-select-all">All Load</button>
                    <button type="button" class="btn btn-primary" id="md-btn-load" data-dismiss="modal"><span class="badge pull-right" id="badge-count" style="margin-left: 7px;margin-top: 2px;">0</span> Load</button>
                    <button type="button" class="btn btn-primary" id="md-btn-close" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal " id="md-progress">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" style="text-align: center;">Tracking Progress...</h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="save-progress" class="h4" style="text-align: center;">

                            </div>
                        </div>
                    </div>
<!--                    <div class="row">
                        <div class="col-md-12">
                            <div id="update-polyline" class="h5" style="text-align: center;">

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div id="message-status" class="h5" style="text-align: center;">

                            </div>
                        </div>
                    </div>-->
                </div>
                <div class="modal-footer">
                    <button id="progress-close" type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="md-tutorial" style="overflow-y: hidden;">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-body" style="padding-top: 30px;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="jumbotron" >
                              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="5"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="6"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="7"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="8"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="9"></li>
                                  <li data-target="#carousel-example-generic" data-slide-to="10"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="item"><img alt="0" src="../tutorial-images/map_name.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item active"><img alt="1" src="../tutorial-images/search_location.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/map_panel.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/calc_route.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/suggest_guide.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/save_load.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/database_search_map.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/database_table.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/load_multi_route.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/guide_multi_route.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/remove_some_route.png" style="width: 800px;height: 500px;"></div>
                                    <div class="item"><img alt="0" src="../tutorial-images/reset-hide.png" style="width: 800px;height: 500px;"></div>
                                </div>
                                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                  <span class="glyphicon glyphicon-chevron-left"></span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                  <span class="glyphicon glyphicon-chevron-right"></span>
                                </a>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="margin-top:-15px;">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
